<template>
  <div style="width: 100%;height:100%;background-color: #071239">
    <div style = "position: absolute;top: 20px;left:20px;color: white;font-weight: bold;font-size: 24px;"></div>
    <img :src="imgs.yslxlogo" style="position:absolute;height: 70px;margin-left: 10px">
    <div style="position:absolute;left: 100px;font-weight: bold;font-size: 28px;top:20px;color: white;z-index: 999;font-family: 'FZYaoti'">中国岩石力学与工程学会</div>
    <div style="position:absolute;right: 20px;font-size: 16px;font-weight:bold;top:20px;color: white;z-index: 999;">技术支持：同济大学&上海同隧信息科技有限公司</div>
    <img :src="imgs.headbg" style="width: 100%">
    <div style = "position: absolute;top: 10px;left:750px;color: white;font-weight: bold;font-size: 32px;">{{title}}</div>
    <div style="display: flex;flex-direction: row;width: 100%;justify-content: space-around;">
      <dv-border-box-11 :title="item.name" style="height: 750px;padding-top: 60px;padding-left: 20px;padding-right: 20px;width: 500px;" :titleWidth="350" backgroundColor="#19233Ddf"
      v-for="(item,index) in list" :key="index" >
        <img :src="item.img" style="height: 700px" @click="viewDetail(item.type)">
      </dv-border-box-11>
      <dv-border-box-11 title="下一步计划" style="height: 750px;padding-top: 60px;padding-left: 20px;padding-right: 20px;width: 500px;" :titleWidth="350" backgroundColor="#19233Ddf">
      <div style="display: flex;flex-direction: column;justify-content:center;align-items:center;">
        <div v-for="(item,index) in next" :key="index" :style="{'color':item.color}" class="itext">{{item.name}}</div>
      </div>
      </dv-border-box-11>
    </div>
  </div>
</template>
<script>
import headbg from "../../static/image/headbg.png";
import geo_img from "../../static/image/地质.png";
import struct_img from "../../static/image/结构.png";
import remain_img from "../../static/image/未完待续.png";
import logo from "../../static/image/top-logo-new.png";
import yslxlogo from "../../static/image/yslxlogo.png";
export default {
  data(){
    return {
      imgs:{headbg,logo,yslxlogo},
      title:"岩石隧道工程信息模型系列标准",
      list:[
        {name:"岩石隧道工程信息模型结构数据标准",img:struct_img,type:"laoying-struct"},
        {name:"岩石隧道工程信息模型地质数据标准",img:geo_img,type:"laoying-geo"},
      ],
      next:[
        {name:"岩石隧道工程信息模型分类与编码标准",color:"#FFE4B5"},
        {name:"岩石隧道工程信息模型结构建模指南",color:"#DEB887"},
        {name:"岩石隧道工程信息模型地质建模指南",color:"#DEB887"},
        {name:"岩石隧道工程信息模型地质交付标准",color:"#FFD700"},
        {name:"岩石隧道工程信息模型结构交付标准",color:"#FFD700"},
        {name:"岩石隧道工程信息模型设计应用标准",color:"#F4A460"},
        {name:"岩石隧道工程信息模型施工应用标准",color:"#F4A460"},
        {name:"岩石隧道工程信息模型运维应用标准",color:"#F4A460"},
      ]
    }
  },
  created () {
  },
  mounted () {
  },
  methods:{
    viewDetail(type){
      if (type){
        this.$router.push({ path: "../MainFrame?prj="+type +"&prjName="+this.list.find(x=>x.type==type).name}); //管理员
      }
    }
  }
}
</script>
<style>
.itext{font-weight: bold;font-size: 24px;margin-top: 50px
}
.el-dialog__header{
  background-color: #19233Ddf !important;
}
</style>
